<template>
  <el-menu :default-active="activeIndex" :ellipsis='false' class="el-menu-demo" mode="horizontal">

    <el-menu-item index="0">
      <img
          style="width: 100px"
          src="@/assets/logo.jpg"
          alt="Element logo"
      />
    </el-menu-item>
    <el-menu-item index="1" @click="$router.push('/')">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>{{ tempUser.name }}</template>
      <el-menu-item index="2-1" @click="$router.push('/user')">用户详情</el-menu-item>
      <el-menu-item index="2-2">退出登录</el-menu-item>
    </el-sub-menu>


  </el-menu>
</template>

<script setup>
import {ref, reactive} from 'vue'

const activeIndex = ref('1')
const tempUser = reactive({
  name: '张三',
  email: 'user@ahnu.edu.cn',
  favorites: ['饭馆1', '最爱的饭馆2']
})
console.log(tempUser.name)

</script>
<style>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>